<template>
  <el-card shadow="always">
    <el-card shadow="hover">
      图片来源
      <el-radio-group v-model="imgSrc" class="content" @change="saveOrEdit(false)">
        <el-radio label="public">仅公共图集</el-radio>
        <el-tooltip :disabled="isLogin" :effect="tipTheme" content="请先登录">
          <el-radio :disabled="!isLogin" label="private">仅个人图集</el-radio>
        </el-tooltip>
        <el-tooltip :disabled="isLogin" :effect="tipTheme" content="请先登录">
          <el-radio :disabled="!isLogin" label="mixed">混合图集</el-radio>
        </el-tooltip>
      </el-radio-group>
    </el-card>

    <el-card shadow="hover">
      图片数量
      <el-slider v-model="imgNum" :max="10" :min="minImgNum" show-input
                 @change="saveOrEdit(false)"></el-slider>
      <div class="wordTips">注意：该设置在下一次更新图片时才会生效</div>
    </el-card>

    <el-card shadow="hover">
      自动轮播
      <el-switch v-model="isAuto" class="content" @change="saveOrEdit(false)"/>
      <span class="wordTips content">默认开启，关闭后图片将不会自动切换</span>
    </el-card>

    <el-card shadow="hover">
      <el-button style="margin-left: 20%" type="primary" @click="saveChanges">保存当前修改</el-button>
      <el-button class="content" @click="resetDefaults">恢复默认设置</el-button>
    </el-card>
  </el-card>
</template>

<script>
import {mapGetters, mapState} from "vuex";

export default {
  name: "SettingsForm",
  data() {
    return {
      imgSrc: 'public',
      imgNum: 10,
      isAuto: true,
    }
  },
  computed: {
    ...mapGetters(["isLogin", "tipTheme"]),
    ...mapState(["isImgLockedList", "imgSource", "imageNum", "isAutoSwitch", "nextImageNum"]),
    minImgNum() {
      const lockNum = this.isImgLockedList.reduce((sum, cur) => {
        return cur ? sum + 1 : sum
      }, 0)
      return Math.max(lockNum, 1)
    }
  },
  methods: {
    saveChanges() {
      this.$store.state.imgSource = this.imgSrc;
      this.$store.state.nextImageNum = this.imgNum;
      if (!this.isAutoSwitch && this.isAuto) {
        this.$store.dispatch("autoChange");
      } else if (this.isAutoSwitch && !this.isAuto) {
        clearInterval(this.$store.state.timer);
      }
      this.$store.state.isAutoSwitch = this.isAuto;

      localStorage.setItem('imgSrc', this.imgSrc);
      localStorage.setItem('imgNum', this.imgNum);
      localStorage.setItem('isAuto', this.isAuto);
      this.saveOrEdit(true);
      this.$message.success('保存成功！')
    },
    resetDefaults() {
      this.imgSrc = 'public';
      this.imgNum = 10;
      this.isAutoSwitch = true;
      this.saveOrEdit(false);
    },
    saveOrEdit(action) {
      this.$emit('changeSavedStatus', action);
    }
  },
  watch: {
    // 退出登录后，需要将图片源复位到公共图集状态
    isLogin(cur) {
      if (!cur && this.imgSrc !== 'public') {
        this.imgSrc = 'public';
        // this.$store.state.nextImageNum = this.imgSrc;
        localStorage.setItem('imgSrc', this.imgSrc);
      }
    }
  },
  created() {
    this.imgSrc = this.imgSource;
    this.imgNum = this.nextImageNum > 0 ? this.nextImageNum : this.imageNum;
    this.isAuto = this.isAutoSwitch;
  }
}
</script>

<style scoped>
  .wordTips {
    font-style: italic;
    color: darkgray;
  }
  .content {
    margin-left: 10%;
  }
</style>